<!DOCTYPE html>
<html>

<meta charset="utf-8"> 
<head>
	<title data-localize="drying.title">干燥炉</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
body{
	margin: 0;
	padding: 0;
}
p{
	margin: 0;
}
.u-line{
	margin-left: 160px;
	width: 770px;
    height: 600px;
    overflow: hidden;
}
.u-road{
	position: relative;
	height: 100px;
	width: 570px;
	float: left;
	margin-top: 160px;
	margin-left: 100px;
	border: 3px solid #29abe2;
	background: #fff;
	
}
.u-faderoad{
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 100px;
	left: 0;
	top: 0;
	background: #fff;
	text-align: center;
	z-index: 16;
}
.u-road:after{
	content: '';
	display: block;
	clear: both;
}
.u-track{
	position: absolute;
	height: 28px;
	width: 100%;
	left: 0;
	top: 85px;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}
.u-outtrack{
	position: absolute;
	height: 52px;
	width: 28px;
	left: 550px;
	top: 33px;
	border-left: 1px solid #cecece;
	border-right: 1px solid #cecece;
}
.break{
	background: url('image/break.png') no-repeat 0 0;
	background-size: 100% 100%;
}
.u-btns{
	margin: 20px 0 0 60%;
}
.u-input{
	position: absolute;
	left: 650px;
	top: 65px;
	width: 68px;
	height: 68px;
	background: #b9b9b9;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
	text-align: center;
	line-height: 68px;
}
.u-output{
	position: absolute;
	left: 530px;
	top: -35px;
	width: 68px;
	height: 68px;
	background: #eef2f7;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 2;
	text-align: center;
	line-height: 68px;
}
.u-cache{
	float: right;
	margin-top: 15px;
	margin-right: 25px;
	width: 68px;
	height: 68px;
	background: #eef2f7;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
	text-align: center;
	line-height: 68px;
	font-size: 14px;
}
.u-text{
	position: absolute;
	top: 45px;
	left: 210px;
}
.u-temperature{
	position: absolute;
	bottom: -310px;
	left: -41px;
	width: 662px;
	height: 300px;
	background-size: 100% auto;
}
.u-zoom{
	float: left;
	width: 74px;
	height: 64px;
	margin-right: 8px;
	margin-bottom: 16px;
	background: #2896d6;
	text-align: center;
}
.u-zoom:nth-child(1){
	color: #fff;
}
.u-zoom:nth-child(2){
	background: #fcd5b4;
}
.u-zoom:nth-child(3){
	background: #fcd5b4;
}
.u-zoom:nth-child(4){
	background: #fead54;
}
.u-zoom:nth-child(5){
	background: #fead54;
}
.u-zoom:nth-child(6){
	background: #fead54;
}
.u-zoom:nth-child(7){
	background: #fcd5b4;
}
.u-zoom:nth-child(8){
	background: #fdeada;
}
.u-zoom h1{
	margin: 0;
	margin-top: 5px;
	font-size: 14px;
	font-weight: normal;
}
.u-zoom p{
	padding: 0;
	margin: 0;
	font-size: 12px;
}
.u-zoom p.u-ss{
	margin-top: 2px;
}
.u-boxcon{
	position: absolute;
	margin: 0;
}
.u-boxcon.boxcon1{
	top: 15px;
	right: -90px;
}
.u-boxcon.boxcon2{
	top: 15px;
	right: 30px;
}
.u-boxcon.boxcon3{
	top: 15px;
	left: -90px;
}
.fanscon{
	position: absolute;
	top: -75px;
	right: 0;
	width: 230px;
	height: 75px;
	line-height: 75px;
}
.fanscon2{
	position: absolute;
	top: -75px;
	left: 0;
	width: 100px;
	height: 75px;
	line-height: 75px;
}
.u-fans{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
}
/*animations*/

.stop {
    animation-play-state: paused;
}
.opposite{
	-webkit-transform: rotateX(180deg);
}
.opposite p,.opposite h1{
	-webkit-transform: rotateX(180deg);
}
.opposite span.paiqi{
	display: inline-block;
	-webkit-transform: rotateX(180deg);
}
.u-tempbtn{
	position: absolute;
	left: 100px;
	top: 370px;
	height: 36px;
	width: 72px;
	color: #29abe2;
	text-align: center;
	line-height: 36px;
	font-size: 14px;
	border: 1px solid #29abe2;
	cursor: pointer;
}
.s-tempcon{
	position: absolute;
	top: 750px;
	left: 240px;
	width: 640px;
	height: 80px;
	border: 1px solid #252525;
}
.s-tempcon .s-tempbox{
	float: left;
	width: 80px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 12px;
	border: 1px solid #252525;
	box-sizing:border-box;
	font-weight: bold;
}
</style>
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="back">回到首页</div></a>
	<h3 data-localize="drying.title">干燥炉</h3>
	<div class="changeLang">
		<p class="u-lang"><span>中文</span><span>English</span></p>
	    <div isopen="true" class="changeLangBtn"></div>
	</div>
</div>
</div>
<div class="u-infos">
	<h2 data-localize="drying.info_title">状态区域</h2>
	<div class="u-errorlist">
		<h3 data-localize="yichang">异常一览：</h3>
		<div class="u-errorlistcon">
		</div>
	</div>
	<p class="status"><span data-localize="drying.running">运行状态：</span><span class="u-cube t-status"></span></p>
	<p class="status"><span data-localize="drying.info_status1">出炉口温度：</span><span class="p5"></span></p>
	<p class="status"><span data-localize="drying.info_status2">外围排风：</span><span class="p6"></span></p>
	<p class="status"><span data-localize="drying.info_status3">当前传输速度：</span><span class="p7"></span></p>
	<p class="status"><span data-localize="drying.info_status4">送风：</span><span class="p16"></span></p>
	<p class="status"><span data-localize="drying.info_status5">抽风1：</span><span class="p17"></span></p>
	<p class="status"><span data-localize="drying.info_status6">抽风2：</span><span class="p18"></span></p>
</div>
<div class="u-cachecon">
<div class="u-cachelist">
</div>
</div>
<div class="t-con">
<div class="u-line">
	<div class="u-boxcon needleft u-boxconspe" id="u-boxe"><div class="u-box u-boxe"></div></div>
	<div class="u-road lineA">
		<div class="u-faderoad"><p class="cachenum"></p></div>
		<div class="fanscon">
		<div class="u-fans"></div>
		<div class="u-fans"></div>
		<div class="u-fans"></div>
		<span class="paiqi" data-localize="drying.fansout">排气</span>
		</div>
		<div class="fanscon2">
		<div class="u-fans"></div>
		<span class="paiqi" data-localize="drying.fansin">进气</span>
		</div>
		<div class="u-boxcon boxcon3"><div class="u-box u-box1"><p></p></div></div>
		<div class="u-boxcon boxcon2"><div class="u-box u-box2"></div></div>
		<div class="u-boxcon boxcon1"><div class="u-box u-box2"><p></p></div></div>
		<div class="u-temperature">
			<div class="u-zoom"><h1 data-localize="drying.wenqu">温区：</h1><p class="tt" data-localize="drying.yushe">预设温度：</p><p class="u-ss" data-localize="drying.shishi">实时温度：</p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_pre">预热区</h1><p class="t0"></p><p class="u-ss t0_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_1">一温区</h1><p class="t1"></p><p class="u-ss t1_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_2">二温区</h1><p class="t2"></p><p class="u-ss t2_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_3">三温区</h1><p class="t3"></p><p class="u-ss t3_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_4">四温区</h1><p class="t4"></p><p class="u-ss t4_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_5">五温区</h1><p class="t5"></p><p class="u-ss t5_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_6">六温区</h1><p class="t6"></p><p class="u-ss t6_r"></p></div>
		</div>

	</div>
	<div class="u-road opposite lineB">
		<div class="u-faderoad"><p class="cachenum"></p></div>
		<div class="fanscon">
		<div class="u-fans"></div>
		<div class="u-fans"></div>
		<div class="u-fans"></div>
		<span class="paiqi" data-localize="drying.fansout">排气</span>
		</div>
		<div class="fanscon2">
		<div class="u-fans"></div>
		<span class="paiqi" data-localize="drying.fansin">进气</span>
		</div>

		<div class="u-boxcon boxcon3"><div class="u-box u-box1"><p></p></div></div>
		<div class="u-boxcon boxcon2"><div class="u-box u-box2"></div></div>
		<div class="u-boxcon boxcon1"><div class="u-box u-box2"><p></p></div></div>
		<div class="u-temperature">
			<div class="u-zoom"><h1 data-localize="drying.wenqu">温区：</h1><p class="tt" data-localize="drying.yushe">预设温度：</p><p class="u-ss" data-localize="drying.shishi">实时温度：</p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_pre">预热区</h1><p class="t0"></p><p class="u-ss t0_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_1">一温区</h1><p class="t1"></p><p class="u-ss t1_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_2">二温区</h1><p class="t2"></p><p class="u-ss t2_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_3">三温区</h1><p class="t3"></p><p class="u-ss t3_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_4">四温区</h1><p class="t4"></p><p class="u-ss t4_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_5">五温区</h1><p class="t5"></p><p class="u-ss t5_r"></p></div>
			<div class="u-zoom"><h1 data-localize="drying.tzone_6">六温区</h1><p class="t6"></p><p class="u-ss t6_r"></p></div>
		</div>
	</div>
	<div class="u-tempbtn" data-open="1" data-localize="drying.quxian">温度曲线</div>
	<div id='canvasDiv' style="position: absolute;top: 380px;left:180px"></div>
	<!-- <div class="s-tempcon">
		<div class="s-tempbox">预热区一</div>
		<div class="s-tempbox p8"></div>
		<div class="s-tempbox">加热区一</div>
		<div class="s-tempbox p10"></div>
		<div class="s-tempbox">加热区二</div>
		<div class="s-tempbox p11"></div>
		<div class="s-tempbox">加热区三</div>
		<div class="s-tempbox p12"></div>
		<div class="s-tempbox">预热区二</div>
		<div class="s-tempbox p9"></div>
		<div class="s-tempbox">加热块一</div>
		<div class="s-tempbox p13"></div>
		<div class="s-tempbox">加热块二</div>
		<div class="s-tempbox p14"></div>
		<div class="s-tempbox">加热块三</div>
		<div class="s-tempbox p15"></div>
	</div> -->
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/common.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.localize.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/language_cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript">
	var chart;

    $(function() {
        var labela = [];
        var data;
        data = [{
            name: langMsg.drying.time,
            value: [0],
            color: '#29abe2',
            line_width: 2,
        }];
        $('.u-tempbtn').click(function () {
            if ($(this).attr('data-open') == 1) {
                $('#canvasDiv').hide();
                //$('.s-tempcon').hide();
                $(this).attr('data-open', '0');
            } else {
                $('#canvasDiv').show();
                //$('.s-tempcon').show();
                $(this).attr('data-open', '1');
            }

        })
        var time = new Date();
        var now = getNowFormatDate(time), past;
        time.setMinutes(time.getMinutes() - 30, time.getSeconds(), 0);
        past = getNowFormatDate(time);
        labela = [past, now];
        chart = new iChart.LineBasic2D({
            render: 'canvasDiv',
            data: data,
            align: 'center',
            width: 770,
            height: 460,
            shadow: false,
            legend: {
                enable: true,
                background_color: null,
                border: {
                    enable: false
                }
            },
            background_color: '#ffffff',
            sub_option: {
                smooth: false,
                label: false,
                hollow: false,
                hollow_inside: false,
                point_size: 6
            },
            coordinate: {
                width: 640,
                height: 260,
                striped_factor: 0.18,
                gridlinesVisible: false,
                grid_color: '#4e4e4e',
                axis: {
                    color: '#252525',
                    width: [0, 0, 2, 2]
                },
                scale: [{
                    position: 'left',
                    scale_enable: false,
                    label: {
                        color: '#333333',
                        font: '微软雅黑',
                        fontsize: 11,
                        fontweight: 600
                    },
                    scale_color: '#9f9f9f'
                }, {
                    position: 'bottom',
                    label: {
                        color: '#333333',
                        font: '微软雅黑',
                        fontsize: 11,
                        fontweight: 600
                    },
                    scale_enable: false,
                    labels: labela
                }],
                listeners: {
                    beforedraw: function (l) {
                        var time = new Date();
                        var now = getNowFormatDate(time), past;
                        time.setMinutes(time.getMinutes() - 30, time.getSeconds(), 0);
                        past = getNowFormatDate(time);
                        labela = [past, now];
                        //console.log(labela)
                        return true;
                    }
                }
            }
        });
        //利用自定义组件构造左侧说明文本
        chart.plugin(new iChart.Custom({
            drawFn: function () {
                //计算位置
                var coo = chart.getCoordinate(),
                    x = coo.get('originx'),
                    y = coo.get('originy'),
                    w = coo.width,
                    h = coo.height;
                //在左上侧的位置，渲染一个单位的文字
                chart.target.textAlign('start')
                    .textBaseline('bottom')
                    .textFont('600 11px 微软雅黑')
                    .fillText(langMsg.drying.tempture, x - 40, y - 12, false, '#333333')
                    .textBaseline('top')
                    .fillText(langMsg.drying.time, x + w + 70, y + h + 10, false, '#333333')
                    .textBaseline('top');
            }
        }));
        //开始画图
        chart.draw();
    })

function getData(line,index,url){
    var res = null;
    $.ajax({  
        type:'get',      
        url: url,
        async : false, 
        dataType: "json",
        data:{"line":line,"index":index},  
        success:function(data){
            if (data.resultCode == 200 && data.resultMessage == "OK") {
                res = data;
            }
        },
        error:function(){
            console.log("fail");
        }  
    });
    return res;
}
</script>
<script type="text/javascript">
var lastData = null,si = null,updateinterval;
var isFirst = true; 
var url = getUrl("drying");
var statistics_url = getUrl('statistics_drying')
var request = new GetRequest();
var showval= request.type; 
if ('WebSocket' in window) {
    websocket = new WebSocket(url+'/'+request.line+'/'+request.index);
}else {
    alert('Not support websocket')
}
if (request.line == "A") {
	$('.lineB').hide();
	$('.lineA').show();
}else if (request.line == "B") {
	$('.lineA').hide();
	$('.lineB').show();
} 

websocket.onerror = function () {
    $('.u-boxcon').addClass('stop');
    clearInterval(updateinterval);
};

websocket.onopen = function (event) {
    $('.u-boxcon').removeClass('stop');
    update();
    updateinterval = setInterval("update()",60000);
}
function addanimate(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
            if (obj[i].isPause == 0){
                
                $('.u-box'+obj[i].stack_index).parent().addClass('moveright');
               
            }

       })(i); 
    }
}
function update(){
	var aaa = [0],
		bbb = [0],
		ccc = [0],
		ddd = [0],
		eee = [0],
		fff = [0],
		ggg = [0],
		line,index;
	line = request.line;
	index = request.index;
	type = $('.type').val();
	var mes = getData(line,line+index,statistics_url);
	//console.log(line,line+index,statistics_url);
	for (var i = 0,len = mes.resultObject.list0?mes.resultObject.list0.length:0; i < len; i++) {
		aaa[i] = mes.resultObject.list0[i];
	}
	for (var i = 0,len = mes.resultObject.list1?mes.resultObject.list1.length:0; i < len; i++) {
		bbb[i] = mes.resultObject.list1[i];
	}
	for (var i = 0,len = mes.resultObject.list2?mes.resultObject.list2.length:0; i < len; i++) {
		ccc[i] = mes.resultObject.list2[i];
	}
	for (var i = 0,len = mes.resultObject.list3?mes.resultObject.list3.length:0; i < len; i++) {
		ddd[i] = mes.resultObject.list3[i];
	}
	for (var i = 0,len = mes.resultObject.list4?mes.resultObject.list4.length:0; i < len; i++) {
		eee[i] = mes.resultObject.list4[i];
	}
	for (var i = 0,len = mes.resultObject.list5?mes.resultObject.list5.length:0; i < len; i++) {
		fff[i] = mes.resultObject.list5[i];
	}
	for (var i = 0,len = mes.resultObject.list6?mes.resultObject.list6.length:0; i < len; i++) {
		ggg[i] = mes.resultObject.list6[i];
	}
	//console.log(aaa,labela)

	data = [{
		name: langMsg.statistics_drying.tzone_pre,
		value: aaa,
		color: '#29abe2',
		line_width: 2,
	},{
		name: langMsg.statistics_drying.tzone_1,
		value: bbb,
		color: '#f5d73e',
		line_width: 2,
	},{
		name: langMsg.statistics_drying.tzone_2,
		value: ccc,
		color: '#f44336',
		line_width: 2,
	},{
		name: langMsg.statistics_drying.tzone_3,
		value: ddd,
		color: '#31c252',
		line_width: 2,
	},{
		name: langMsg.statistics_drying.tzone_4,
		value: eee,
		color: '#f9a3e2',
		line_width: 2,
	},{
		name: langMsg.statistics_drying.tzone_5,
		value: fff,
		color: '#95b51b',
		line_width: 2,
	},{
		name: langMsg.statistics_drying.tzone_6,
		value: ggg,
		color: '#b136d8',
		line_width: 2,
	}];
	// var time = new Date();
	// var now = getNowFormatDate(time),past;
	// time.setMinutes(time.getMinutes() - 30, time.getSeconds(), 0);
	// past = getNowFormatDate(time);
	// labela = [now,past];
	chart.load(data);
}

websocket.onmessage = function (event) {
	$('.u-box').show();
	//update();
	$('#u-boxe').addClass('moveright');
    si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
    if (!lastData) {
    	lastData = si;
    }
	//console.log(si);
	changeColor($('.t-status'),si.p2);
	if (isFirst) {
    	count(si.stack_list,showval);
		isFirst = false;
    }
    addanimate(si.stack_list);
    errorRender();
	cacheRender();
	//$('.u-boxcon').addClass('moveright');
	$('.cachenum').html(si.cache_list.length);
	$('.t0').html(si.t0+"&#8451;");
	$('.t1').html(si.t1+"&#8451;");
	$('.t2').html(si.t2+"&#8451;");
	$('.t3').html(si.t3+"&#8451;");
	$('.t4').html(si.t4+"&#8451;");
	$('.t5').html(si.t5+"&#8451;");
	$('.t6').html(si.t6+"&#8451;");
	$('.t0_r').html(si.t0_r+"&#8451;");
	$('.t1_r').html(si.t1_r+"&#8451;");
	$('.t2_r').html(si.t2_r+"&#8451;");
	$('.t3_r').html(si.t3_r+"&#8451;");
	$('.t4_r').html(si.t4_r+"&#8451;");
	$('.t5_r').html(si.t5_r+"&#8451;");
	$('.t6_r').html(si.t6_r+"&#8451;");
	$('.p7').html(si.p7);
	$('.p5').html(si.p5);
	$('.p6').html(si.p6);
	$('.p8').html(si.p8);
	$('.p9').html(si.p9);
	$('.p10').html(si.p10);
	$('.p11').html(si.p11);
	$('.p12').html(si.p12);
	$('.p13').html(si.p13);
	$('.p14').html(si.p14);
	$('.p15').html(si.p15);
	$('.p16').html(si.p16);
	$('.p17').html(si.p17);
	$('.p18').html(si.p18);
	//console.log(si.cache_list[0].silicon_id,si.stack_list[1].silicon_id);
    lastData = si;
    //$('.u-boxcon').addClass('moveleft');
    //count(si.stack_list);
}


document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function(){
	$('.u-boxcon').removeClass('moveright');
	reset();
	count(si.stack_list,showval);
	if (showval == 1) {
		$('.u-box3').addClass('backprinted');
	}else if (showval == 2){
		$('.u-box3').addClass('backprinted');
	}else{
		$('.u-box3').addClass('printed1');
	}
}, false);
window.onbeforeunload = function(){
	websocket.close();
	clearInterval(updateinterval);
}

</script>
</body>
</html>